<script setup>
// 集成所有组件
import C from "@/components/C";
import {
  reactive,
  onMounted,
  ref,
  toRefs,
  getCurrentInstance,
  computed,
} from "vue";
// import { useTogglePopup } from "@/hooks/app-hook";
import { useStore } from "vuex";
import socket from "./socket";

const store = useStore();
const user = store.state.user;
const notify = store.state.notify;
const nowChats = notify.nowChats;

const instance = getCurrentInstance();
const app = instance.appContext.app;
const main = ref(null);

const token = computed(() => user.token);
const userInfo = computed(() => user.userInfo);

// const D = reactive({
//   ...toRefs(useMapState("user", ["token", "userInfo"])),
//   ...toRefs(useMapState("show")),
// });

onMounted(() => {
  // 消息ArrayBuffer存到Vuex中并做持久化到 Indexdb 中
  // 读取时针对 ArrayBuffer 进行 Blob Url 的生成 不能直接存 Blob Url
  socket.on(user.userInfo._id, (message) => {
    let u = message.fromUser;
    console.log("客户端receive1私聊: ", message.msg, u);
    let chatInfo = {
      id: u._id,
      id2:user.userInfo._id,
      avatar: "http://q4.qlogo.cn/headimg_dl?dst_uin="+u.qq_account+"&spec=100",
      title: u.nick_name,
      type: u.type,
      messages: [
        {
          from:"other",
          date: new Date().toLocaleTimeString(),
          msg: message.msg,
          readStatus:false
        },
      ],
    };
    let findChatUIndex = nowChats.findIndex((v,i)=> v.id === u._id);
    if(findChatUIndex >= 0){
      nowChats[findChatUIndex]['messages'].push({
          from:"other",
          date: new Date().toLocaleTimeString(),
          msg: message.msg,
          readStatus:false
      })  
    }else{
      console.log(100000);
      nowChats.push(chatInfo);
    }
    // console.log(nowChats);
    store.dispatch("notify/setNowChats",nowChats)
    app.$bus.emit("reciveMessage", 1);
  });
});

app.$bus.on("reciveMessage", (notifyCount) => {
  store.dispatch("notify/setAddNotifyCount", 1);
});

const handlerNavBarTop = (e) => {
  if (e.target.scrollTop > 330) {
    app.$bus.emit("changeNavBarTopBgColor", "#08f");
  } else {
    app.$bus.emit("changeNavBarTopBgColor", "transparent");
  }
};
</script>

<template>
  <C.Popup />
  <!-- 侧边导航栏 -->
  <div class="container">
    <!-- 顶部导航栏 -->
    <C.Header />
    <!-- 路由视图区域 -->
    <router-view
      class="main"
      id="main"
      ref="main"
      @scroll="handlerNavBarTop"
      v-slot="{ Component }"
    >
      <transition-group name="fade">
        <component :is="Component" :key="Component" />
      </transition-group>
    </router-view>
    <!-- 底部菜单区域 -->
    <C.Footer v-if="token !== '' && JSON.stringify(userInfo) !== '{}'" />
  </div>
</template>

<style lang="scss">
:root {
  --van-nav-bar-icon-color: #999;
  --van-nav-bar-height: 50px;
  --van-active-opacity: 1;
  --van-badge-size:20px;
}

.van-badge--bottom-right{
  bottom:25px;
  right:35px;
}


.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    height: 50px;
  }
  .footer {
    height: 50px;
  }
  .main {
    flex: 1;
    overflow-y: scroll;
  }
  .van-cell__title {
    padding-left: 5px !important;
  }
}

.fade-enter-active {
  animation: animate 0.5s;
}
@keyframes animate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
